<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    //1.在页面中插入1000个button
   
<div class="box"></div>
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
<script>
    // 方法1  通过直接操作单 DOM 实现(效率不高)
    // let box = document.querySelector('.box')
    // for(var i = 0; i < 100;i++) {
        // 操控元素内容
        // box.innerHTML+='<button>点击</button>'
    // }

    // 方法2 通过 字符串 添加 （效率较高）
    // let box = document.querySelector('.box')
    // let str = ''
    // for(var i = 0;i < 110;i++) {
    //     str += '<button>点击</button>'
    // }

    // box.innerHTML = str

     //2.求1-100的和
    //  let num = 0
    //  for (var i = 1; i<101;i++) {
    //     num+=i
    //  }
    //  console.log(num)

    //3.给所有li添加事件
    // let li = document.querySelectorAll('li')
    // for(var i = 0; i <= li.length;i++) {
    //     li[i].onclick = function(){
    //         console.log('你为什么点我')
    //     }
    // }

    // 双重 for 循环
    // 九九乘法表
    // var num = 0;
    // for(var i = 0;i <=9;i++){
    //     for(var k = 0;k <= 9; k++) {
    //         console.log(i + '*' + k + '=' + i*k)
    //     }
    // }

    // for in  遍历对象
    // var array = {
    //     name:'鲁班',
    //     age:20,
    //     sex:'公'
    // }

    // for (var key in array){
    //     console.log(key)
    //     console.log(array[key])
    // }    

    // 遍历数组
    // var arr = [1,2,3,4,5]
    // for (var k in arr) {
    //     console.log(k)
    //     console.log(arr[k])
    // }
    
    var str = 'rrrruuuuususususu'
    var strnum = ''  // 装最后输出的值
    var strnum2 = '' // 装数量
    var strarr = {}  // 定义一个空数组用来装 数据
    for(var i = 0; i < str.length; i++) {
        // console.log(strarr)
        // console.log(strarr[str[i]])
        // 这里是判断  strarr 里面有没有  [str[i]] 被遍历的值
        // 将属性名为 [str[i]]的 属性值 ++
        if(strarr[str[i]]) {
            strarr[str[i]]++
        }
        // 如果之前 strarr[str[i]] 没有这个值就加一
        // 类似于  obj:{r:1}  将没有的值添加 属性名为 [str[i]] 属性值为 1
        else {
            strarr[str[i]]=1
        }
    }
    console.log(strarr)

    // console.log(strarr)
    // strarr 里面的值 为 [r: 4, u: 9, s: 4]
    // 把 strarr 遍历 
    for (var key in strarr) {
        // console.log(key)
        // console.log(strarr[key])
        // 这里还要判断一下 谁的数值最大
        if(strarr[key]>strnum2) {
            this.strnum = key
            this.strnum2 = strarr[key]
        }
    }
    console.log(strnum)   // s
    console.log(strnum2)  // 4

    // while 和 do-while 
    // while 是先判断再执行
    // 格式 ： while （条件） {
    //     循环体
    //     更新循环数值
    // }
    // 示例：
    //     var i = 0;
    //     while(i>10) {  // 条件不成立不执行下面语句
    //         console.log(i)
    //         i++
    //     }

    // do-while 是先执行再判断
    // 不管条件成立与否都会执行一次
    // 格式:
    //     var i = 0;
    //     do{
    //         console.log(i)
    //         i++
    //     } 
    //     while(i>10)  // 这里条件不成立还是会执行一次循环体的内容

    // continue 与 break
    // continue 跳过本次循环 不停止循环
    // break 停止循环
    // for(var i = 0;i<=10; i++) {
    //     if(i===5) {  // 这里一定 不能写一个等号
    //         continue    
    //     }
    //     console.log(i)  // continue 把 遍历5 跳过了 不输出

    // }


    for(var i = 0;i<10; i++) {
        if(i==5) {
            break;
        }
        console.log(i)  // 这里的判断到 5 就停止了 只遍历输出到4

    }

</script>

    <!-- <p>asd</p> -->
    <script>
        // 三元表达式
        // var c = 10
        // var b = c>9?'true':'false'  // true
        // console.log(b)

        // if判断
        // 单个判断
        // let a = 61;
        // if(a>95) {document.write('有奖励')}
        // else if(a<95) {document.write('没有奖励')}

        // 多个条件多个输出
        // let a = 95
        // let b = 95
        // if(a>95 && b >95) {document.write('有奖励'),alert('没作业')}
        // else {document.write('没奖励'),alert('有作业')}

        // 多个判断
        // let a = 20
        // if(a>90){document.write("压岁钱加倍,作业没有");}
        // else if(a>80){document.write("压岁钱加倍,作业练习册1本");}
        // else if(a>70){document.write("压岁钱照旧,作业练习册2本");}
        // else if(a>=60){document.write("压岁钱没有,作业练习册3本");}
        // else {document.write("压岁钱没有,作业练习册4本");}

        // 省略写法
        // let a = 10
        // if(a>10) console.log('a大于10'); // 条件成立才执行  简写必须要写在同一行内
        // console.log('我我我');  // 这条语句不受 if 判断的控制

        // switch语句
        // case 条件
        // break 结束
        // default 当所有条件都不成立时

        // let a = 19;
        // switch(a) {
        //     case 18: document.write('八折');break;
        //     case 19: document.write('九折');break;  // 这里条件成立输出九折
        //     case 29: document.write('打骨折');break;
        //     default:document.write('不打折');break;
        //     // 注意:每个case 都要加 break 不然会继续下一步判断
        // }
    </script>
        
        
</body>
</html>